<%@ page import="bean.Seat" %>
<%@ page import="java.util.List" %>
<%@ page import="bean.Readroom" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>座位平面图</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <script type="javascript" src="../js/bootstrap.min.js"></script>
    <script type="javascript" src="../js/bootstrap.js"></script>
    <style>
        body{
            background-color:darkslategray;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        table{border-spacing: 12px 30px;}

        .showcase{
            background-color:olive;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            list-style-type: none;
            width: 70%;
            height: 7%;
            margin: 30px auto;
            padding: 5px 10px;
        }
        .showcase li{
            color:lightgray;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
        }

        .seat{
            background-color:darkgrey;
            width: 30px;
            height: 16px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            margin: 0 3px;
        }
        .occupied{
            background-color:floralwhite;
            width: 30px;
            height: 16px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            margin: 0 3px;
        }
        .broken{
            background-color:salmon;
            width: 30px;
            height: 16px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            margin: 0 3px;
        }
        .seat:hover{
            /*background-color: floralwhite;*/
            transform: scale(1.2);
            cursor:pointer;
        }
        /*.seat:not(.occupied):hover{*/
        /*         !*background-color: floralwhite;*!*/
        /*         transform: scale(1.2);*/
        /*         cursor:pointer;*/
        /*     }*/
        .seat:active{
            background-color: floralwhite;
            cursor:pointer;
        }
        .seat:nth-last-of-type(2){
            margin-left: 20px;
        }
        .seat:nth-last-of-type(6){
            margin-left: 20px;
        }
        .body_one{
            height: 35%;
            width: 100%;
            border: 1px #00aa00 solid;
        }
        .body_one_left{
            height: 100%;
            width: 50%;
            border:1px #0055f0 solid;
            float: left;
        }
        .body_one_left_head{
            height: 10%;
            width: 40%;
            background-color:#ffe9cc;
            margin:0 auto;
            text-align: center;
        }
        .body_one_left_head h1{
            font-size: 20px;
            color: black;
        }
        .body_one_right{
            height: 100%;
            width: 49%;
            border:1px #00aa00 solid;
            float: right;
        }
        .body_two{
            height:35%;
            width: 100%;
            border: 1px #00ffff solid;
        }
        .body_two_left{
            height: 100%;
            width: 50%;
            border:1px white solid;
            float: left;
        }
        .body_two_right{
            height: 100%;
            width: 49%;
            border:1px #00aa00 solid;
            float: right;
        }

    </style>

    <script>
        var number;
        function onclick_seat (number) {
            window.open("ManagerCommon.jsp?"+number,"number","height=400,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
        }
    </script>

</head>
<body>
<%
    int m=0;
    List<Readroom> seatList = (List<Readroom>)request.getAttribute("seatlist");
%>

<ul class="showcase">
    <li>
        <div class="seat"></div>
        <small>可预约</small>
    </li>
    <li>
        <div class="occupied"></div>
        <small>预约满</small>
    </li>
    <li>
        <div class="broken"></div>
        <small>维修中</small>
    </li>
</ul>

<div class="body_one">
    <div class="body_one_left">
        <div class="body_one_left_head"><h1>A区</h1></div>
        <table>
            <%--    <c:forEach items="${seatlist}" var="seat">--%>
            <%--        <tr>--%>
            <%--            <td calss="${seat.usestatus}">${seat.seatnum}</td>--%>
            <%--        </tr>--%>
            <%--    </c:forEach>--%>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Readroom seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("A区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>

    <div class="body_one_right">
        <div class="body_one_left_head"><h1>B区</h1></div>
        <table>
            <%--    <c:forEach items="${seatlist}" var="seat">--%>
            <%--        <tr>--%>
            <%--            <td calss="${seat.usestatus}">${seat.seatnum}</td>--%>
            <%--        </tr>--%>
            <%--    </c:forEach>--%>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Readroom seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("B区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>
</div>

<div class="body_two">
    <div class="body_two_left">
        <div class="body_one_left_head"><h1>C区</h1></div>
        <table>
            <%--    <c:forEach items="${seatlist}" var="seat">--%>
            <%--        <tr>--%>
            <%--            <td calss="${seat.usestatus}">${seat.seatnum}</td>--%>
            <%--        </tr>--%>
            <%--    </c:forEach>--%>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Readroom seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("C区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>
    <div class="body_two_right">
        <div class="body_one_left_head"><h1>D区</h1></div>
        <table>
            <%--    <c:forEach items="${seatlist}" var="seat">--%>
            <%--        <tr>--%>
            <%--            <td calss="${seat.usestatus}">${seat.seatnum}</td>--%>
            <%--        </tr>--%>
            <%--    </c:forEach>--%>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Readroom seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("D区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getReadroomnum()%>" onclick=onclick_seat("<%=seat.getReadroomnum()%>")><%=seat.getReadroomnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>
</div>
</body>
</html>
